import React from 'react'
import Topbar from '../../components/Topbar/Topbar';
import { NavLink } from 'react-router-dom';
import './Activity.css'
import { SearchBar,List,DatePicker } from 'antd-mobile';
import Bottombar from '../../components/Bottombar/Bottombar'

class Activity extends React.Component {

	constructor(props) {
    super(props);
    this.state = {
      activityData:[],
      attr:'https://www.prebeauty.work',
    };
	}

  componentDidMount(){
    this.getActivityData()
  }

  getActivityData(){
		fetch("https://www.prebeauty.work/activity")
			.then((res) => res.json())
			.then(data => {
        var sortData=[]
        sortData= data.sort(function (a, b) {
          if (a.time !== b.time) {
            return b.time - a.time;
          } else {
            return b.look - a.look;
          }})
        sortData.map(data => {
          data.time = this.timeTrans(data.time)
        })
				this.setState({
					activityData:sortData,
				})
			})
			.catch(err => console.log(err));
	}

  //将时间戳转换成正常时间格式
  timeTrans(date){
    var date = new Date(date*1);
    var Y = date.getFullYear() + '-';
    var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
    var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
    return Y+M+D;
  }

  //Enter时触发
  onSubmit(val){
    var allData = this.state.activityData
    var selectData = []
    allData.map(data => {
      console.log(data)
      if(data.name.indexOf(val)>=0){
        selectData.push(data);
      }
    })
    this.setState({
      activityData:selectData
    })
  }

  addLook(id,look){
    var b = JSON.stringify({num:Number(look)+1})
    fetch(`https://www.prebeauty.work/activity/${id}`,{method:'PUT',body:b,headers:{'Content-Type':'application/json'}},)
			.then((res) => res.json())
			.then(data => {
        console.log(data)
      })
  }

	render() {
    return (
      <div className="Activity">
        <Topbar name='活动广场' color='#95D2AA'/>
        <SearchBar 
          placeholder="Search" 
          maxLength={8} 
          onSubmit={(val)=>{this.onSubmit(val)}}
          onFocus={()=>{this.getActivityData()}}
          onCancel={()=>this.getActivityData()}
          style={{backgroundColor:'#95D2AA',margin:'10px'}}/>

        <div id='all'>
          {this.state.activityData.map((val,index)=>(
            <div 
              id='list-item' 
              onClick={()=>{
                this.props.history.push('/ActivityDetail',{id:val.id,name:val.name})
                this.addLook(val.id,val.look)
              }}>
              <div id='list-item-div'>
                <div id='list-item-div-title' style={{fontSize:'18px'}}>{val.name}</div><br/>
                <div id='list-item-div-context'>地点： {val.place}</div><br/>
                <div id='list-item-div-context'>时间： {val.time}</div><br/>
                <div style={{textAlign:'right',color:'#336600',paddingRight:'10px',fontWeight:'bold'}}>{val.look}
                  <span style={{color:'gray',paddingLeft:'3px'}}>click</span>
                </div>
              </div>
              <div id='list-item-trimage'>
                <div id='list-item-angle2'></div>
                <img src={this.state.attr+val.face} alt='' id='list-item-img2'/>
              </div>
            </div>
          ))}
        </div>
        <Bottombar/>
      </div>
    )
  }
}

export default Activity